<%@include file="_header.jsp"%>
        <title>${inhoud.attendDigitalClassTitle}</title>
        <script src="js/movie-player/js/hdwebplayer.js" type="text/javascript"></script>
        <link href="css/digital_class.css?version=<%= (int) (Math.random() * 100000000)%>" rel="stylesheet" type="text/css">
    </head>
    <body>

         <c:choose>
            <c:when test="${userLevel == null}">
                <%@include file="errorPage.jsp"%>
            </c:when><c:otherwise>
<% if(request.getParameter("embedded") == null){ %>
    <%@include file="_menu.jsp"%>
    <div class="sidebar">

            <div class="redbar"><a href="#"><div id="bar-textcontent">${inhoud.attendDigitalClassTitle}</div></a>
            </div>
<div id="sidescreen">

    <ul class="thumbnails">
    <li class="span4">
    <div class="thumbnail">
     <h3>${inhoud.attendDigitalClassTitle}</h3>
    <img src="icons/blackboard.png" alt="">

    <p>${inhoud.attendDigitalClassT4}</p>
    </div>
    </li>
    <div class="insertext-thumbnail">
    ${inhoud.attendDigitalClassT5}
    </div>
    </ul>

 
</div>

        </div>

<div class="wrappermain">

<div class="digitalclass">
    <div id="subheader"> <div id="bar-textcontent">${inhoud.attendDigitalClassTitle} </div></div>
      <div class="main-digital"> 
<% } else { %>          
<style type="text/css">body {color:white;}</style>
<% } %>

<c:choose>
    <c:when test="${selectDigitalClasses != null}">
        
        !!!!Selecteer een digital class:
        <table class="table" >
            <td>!!!!Course</td>
            <td>!!!!Module</td>
            <td>!!!!Description</td>
            <td>!!!!Date</td>
            <td>!!!!Start time</td>
            <td>!!!!End time</td>
            <td>!!!!Max<br>students</td>
            <td>&nbsp;</td>
        <c:forEach var="curClass" items="${selectDigitalClasses}">
    <tr>
        <td>
            ${curClass.course.courseName}
        </td>
        <td>
            ${curClass.module.moduleName}   
        </td>
        <td>
            ${curClass.description}
        </td>      
        <td>
            ${curClass.date}
        </td>          
        <td>
            ${curClass.startTime}
        </td>      
        <td>
            ${curClass.endTime}
        </td>      
        <td>
            ${curClass.maxStudents}
        </td>         
        <td>
            <a href="attend_digital_class?ID=${curClass.digitalClassID}"><img src="icons/next_button.png"></a>
        </td>
    </tr>
${digitalClass.maxStudents}
        </c:forEach>
        </table>        
        
    </c:when><c:otherwise>
        <div class="digital_class">
            <div class="hidden_code" id="video_stream_inactive">
                <center><img src="http://www.anidolheart.com/wp-content/uploads/2010/08/waiting.gif" width="300px" /></center>    
            </div>   
            <div class="hidden_code" id="session_pending">
                <h1>${inhoud.attendDigitalClassT}</h1>   
            </div>         
            
            
            
            
            <div class="containerFirst">
                <div id="video_stream">
                    <h1>${inhoud.attendDigitalClassT2}</h1>
                </div>
            </div>            
            <div class="container">
                <div id="askQuestion" style="width:290px; text-align: left;"></div>
                <div id="viewQuestion" style="width:290px; text-align: left; max-height:300px; overflow-x: hidden; overflow-y: auto;"></div>
                <div id="viewAnswer" style="width:290px; text-align: left;"></div>
                </iframe>                  
            </div>

            
            <div class="containerFirst">
                <div id="tabs">
                    <ul>
                        <li><a href="#tabs-1">Blackboard</a></li>
                        <li><a href="#tabs-2">Powerpoint</a></li>
                        <li><a href="#tabs-3">Media</a></li>
                    </ul>
                    <div id="tabs-1">
                        
                    </div>
                    <div id="tabs-2">
                        <div id="class_media">&nbsp;</div>
                    </div>
                    <div id="tabs-3">

                    </div>
                </div>                
                
            </div>               
        </div>
        <script language="javascript">
            $(document).ready(function() {
                var digitalClassId = ${digitalClassSession.digitalClassId};
                var classActive;
                var videoActive = false;
                var videoSource = "";
                var videoPlaying = false;
                var mediaActive = false;
                var mediaSource = "";
                var mediaSlide = 1;
                var mediaActiveType = 0;
                              
                $("#tabs").tabs();
                $("#tabs-2").html("<iframe src=\"https://docs.google.com/gview?url=http://www.pcvanvelzen.nl/32l.ppt&embedded=true\" width=\"300px\" height=\"300px\">");

                $('#askQuestion').load('askQuestion.jsp', function() {});
                $('#viewQuestion').load('viewQuestion', function() {});
                $('#viewAnswer').load('viewAnswer.jsp', function() {});
                
              setInterval(function(){                
                    $('#viewQuestion').load('viewQuestion', function() {}); 
              }, 1000);
                
                setInterval(function(){
                    $.ajax({
                        url: 'digital_class/media?ID=' + digitalClassId,
                        dataType: 'json',
                        success: function( data ) {
                            if(classActive != data.classActive){   
                                if(data.classActive == false){
                                    $("#video_stream").html($("#session_pending").html());
                                    $("#class_media").html("");
                                    $(".container").hide();
                                } else {
                                    makePlayer(data); 
                                    showMedia(data);
                                    $(".container").show();
                                }
                            } else {
                                if(videoActive != data.videoActive || videoPlaying != data.videoPlaying || videoSource != data.videoSource){
                                    makePlayer(data);
                                }
                                if(mediaActive != data.mediaActive || mediaSource != data.mediaSource || mediaSlide != data.mediaSlide || mediaActiveType != data.mediaActiveType){
                                    showMedia(data);
                                }
                            }
                            $("#tabs-1").html(data.blackBoardText);
                            
                            classActive = data.classActive;
                            videoActive = data.videoActive;
                            videoPlaying = data.videoPlaying;   
                            videoSource = data.videoSource;
                            mediaActive = data.mediaActive;
                            mediaSource = data.mediaSource;
                            mediaSlide = data.mediaSlide;    
                        },
                        error: function( data ) {
                          alert( "ERROR:  " + data.html );
                        }
                      });                    
                }, 400);  
                
        function showMedia(data){
            if(data.mediaActive == true){
                $("#tabs").show();
                if(mediaActiveType != data.mediaActiveType){
                    $("#tabs-1").hide();
                    $("#tabs-2").hide();
                    $("#tabs-3").hide();

                    $("#tabs-"+data.mediaActiveType).show();
                }


                $("#tabs-1").html(data.blackBoardText);
                if(mediaSource != data.mediaSource){
                    $("#tabs-3").html('<img src="' + data.mediaSource + '" height="300px">');        
                }
                //$("#class_media").html('<img src="' + data.mediaSource + '" height="300px">');
            } else {
                $("#tabs").hide();
            }
        }                

});
            
function submitForm(ID, target){
    $.ajax({
        data: $("#"+ID).serialize(), 
        type: $("#"+ID).attr('method'),
        url: $("#"+ID).attr('action'), 
        success: function(response) {
            $('#'+target).html(response);
            $('#viewQuestion').load('viewQuestion', function() {});
                      
        }
    });                    
}            



function makePlayer(data){
    if(data.videoActive == true){
        $("#video_stream").html('<div id="current_movie"></div>');
        hdwebplayer({ 
            id        : 'current_movie',
            swf       : 'js/movie-player/player.swf', 
            width     : '100%', 
            height    : '300px' ,
            video     : data.videoSource,
            autoStart : data.videoPlaying
        });   
    } else {
        $("#video_stream").html($("#video_stream_inactive").html());
    }
}
        </script>  
</c:otherwise></c:choose>        
    </body>
            </c:otherwise></c:choose>
</html>